<template>
  <span class="bs-address">
    <div v-for="(item, index) in localAddress" :key="index" v-text="item"></div>
  </span>
</template>
<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
})
const localAddress = computed(() => {
  const tempArray: string[] = []
  if (props.value) {
    if (props.value.includes(',')) {
      const temp = props.value.split(',')
      let address = ''
      let district = ''
      let country = ''
      for (let i = 0; i < temp.length; i++) {
        if (i === 0) {
          district = temp[i]
        } else if (i === 1) {
          tempArray.push(district + ',' + temp[i])
        } else if (i === temp.length - 1) {
          country = temp[i]
        } else {
          address += temp[i] + ','
        }
      }
      tempArray.push(address?.slice(0, -1))
      tempArray.push(country)
    }
  }
  return tempArray
})
</script>
<style scoped lang="scss">
.bs-address {
}
</style>
